@import '../../styles';

.blueboard {
  width: 100%;
  height: 100%;
  display: grid;
  position: relative;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(24, 1fr);
  .blue-item {
    position: relative;
    margin: 10px;
    background: #fff;
    border-radius: 5px;
    .flexCenter();
    .font444();
  }
}

.blueboard::before {
  content: '';
  position: absolute;
  top: 0;
  background: #0577c3;
  filter: blur(200px);
  width: 100%;
  height: 100%;
  z-index: -1;
}

.blueboard-green {
  background: #02a425;
  .rewardbox();
  .flexCenter();
  .fontfff();
}

.blueboard-purple {
  background: #571788;
  .rewardbox();
  .flexCenter();
  .fontfff();
}
.blueboard-orange {
  background: #ff7801;
  .rewardbox();
  .flexCenter();
  .fontfff();
}
.blueboard-yellow {
  background: #f9da4a;
  .rewardbox();
  .flexCenter();
  .fontfff();
}
.blueboard-point-item {
  margin: 4px;
  display: flex;
  flex-direction: column;
}
.blueboard-point-item-1 {
  background: #0577c3;
  border-radius: 5px;
  height: 50%;
  color: #fff;
  .flexCenter();
}
.blueboard-point-item-2 {
  height: 50%;
  color: #7fd4f4;
  .flexCenter();
}
